<template>
	<view class="column-css">
		
		<view class="row-css view-cente view-cente-cle" style="align-items: center;margin: 0 30rpx;margin-top: 30rpx;">
			<view class="row-css">
				<view class="view-cente-cle-text">原手机号</view>
			</view>
				<view>{{ userInfo.mobile }}</view>
		</view>
		<view class="row-css view-cente view-cente-cle" style="margin: 0 30rpx;justify-content: space-between;align-items: center;">
			<view class="row-css">
				<view class="view-cente-cle-text" style="width: 180rpx;">短信验证码</view>
				<view class="row-css" style="width: 300rpx;">
					<form><input v-model="code" type="phone" maxlength="6" onkeyup="this.value=this.value.replace(/\D/g,'')" placeholder="请输入短信验证码" /></form>
				</view>
			</view>
			<view class="code-view" @click="sendcode()">{{ codeText }}</view>
		</view>
		<!-- <view class="row-css view-cent view-cente-cle" style="justify-content: space-between;align-items: center;margin: 0 30rpx;">
			<view class="view-cente-cle-text" style="border-bottom: 1rpx solid #F1F1F1;display: flex; align-items: center;">短信验证码</view>
			<view style="border-bottom: 1rpx solid #F1F1F1;padding: 20rpx 0; margin-right: 20rpx; flex:1;">
				<form><input v-model="code" type="phone" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')" placeholder="请输入短信验证码" /></form>
			</view>
			<view class="code-view" @click="sendcode()">{{ codeText }}</view>
		</view> -->
		<view class="view-button" @click="onnext()">下一步</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {},
			mobile:'',
			code: '',
			time: 60,
			codeText: '获取验证码'
		};
	},
	methods: {
		sendcode() {
			let that = this;
			if (that.time == 60) {
				that.wxRequest({
					url: `${that.API}/driver/driverInformation/sms-change-mobile-code`,
					method: 'POST',
					data:{
						mobile: that.userInfo.mobile,
						smsType:2
					},
					title: '验证码发送中...',
					success: res => {
						uni.showToast({
							title: '验证码已发送成功',
							icon: 'none'
						});
						that.timer = setInterval(() => {
							that.codeText = `${that.time}s后获取验证码`;
							that.time--;
							if (that.time < 0) {
								that.time = 60;
								that.codeText = '获取验证码';
								clearInterval(that.timer);
							}
						}, 1000);
					}
				});
			}
		},
		onnext() {
			if (this.code != '') {
				this.wxRequest({
					url: `${this.API}/driver/driverInformation/check-mobile`,
					method: 'POST',
					data:{
						mobile: this.userInfo.mobile,
						mobileCode: this.code,
						smsType:2
					},
					title: '验证中...',
					success: res => {
						console.log("dddd===========",res.data.data.status == 0);
						if(res.data.data.status == 0){
							uni.redirectTo({
								url: '../personal/updatnewphone'
							});
						}else{
							uni.showToast({
								title: res.data.data.message,
								icon: 'none',
								duration: 2000
							});
						}
					}
				});
			} else {
				uni.showToast({
					title: '请输入验证码！',
					icon: 'none'
				});
			}
		}
	},
	onLoad: function(options) {
		this.userInfo = uni.getStorageSync(this.DATA_KEY.userInfo);
	}
};
</script>

<style>
page {
	background: #ffffff;
}
.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}
.view-cente {
	background: #ffffff;
	padding: 0 30rpx;
}
.view-cente-cle {
	padding: 25rpx 0;
	border-bottom: 1rpx solid #eeeeee;
}
.view-cente-cle-text {
	width: 180rpx;
	color: #5f6579;
}
.code-view {
	width: 240rpx;
	display: flex;
	font-size: 28rpx;
	color: #2979ff;
	/* color: #ffffff;
	background: #2979ff;
	border: 1rpx solid #2979ff;
	padding: 15rpx 0;
	justify-content: center; */
	align-items: center;
}
.view-button {
	background: #ffffff;
	display: flex;
	position: fixed;
	bottom: 50rpx;
	justify-content: center;
	border: 1rpx solid #007aff;
	border-radius: 10rpx;
	color: #007aff;
	padding: 20rpx;
	margin: 40rpx;
	width: 84%;
	font-size: 30rpx;
}
</style>
